<template>
    <div ref="wrapper" class="btn">
    <div>
        <div>
            <div class="box">
            <div class="title">当前位置</div>
            <div class="bigbox">
                <span>{{this.$store.state.city}}</span>
            </div>
        </div>
        <div class="hotcity">热门城市</div>
        <div class="box1">
            <ul>

                <li v-for="(item) in hotCities" :key="item.id">{{item.name}}</li>

                <li v-for="(item,index) in hotCities" :key="index" ><div @click="click1(item.name)">{{item.name}}</div></li>

            </ul>
        </div>
        <div>
            <div class="box4"
             v-for="(item,key) in  cities" :key="key" :ref="key">
            <div>{{key}}</div>
            <ul>

                <li v-for="(item,index) in item" :key="index">{{item.name}}</li>

                <li v-for="(item,index) in item" :key="index" @click="click1(item.name)">{{item.name}}</li>
            </ul>
        </div>
        </div>
        </div>
        </div>
    </div>
</template>
<script>
// 引入
import Bscroll from 'better-scroll'
    export default{
        name:'List',
         props:{
            hotCities:Array,
            cities:Object,
            letter:String   //接受传递过来的数据
        },
        methods:{
            click1(city){
                this.$store.dispatch("changecity",city);
                this.$router.push("/")
            }
        },
        mounted (){
           this.scroll=new Bscroll(this.$refs.wrapper);
           
        },
        
        watch:{//监听        
            letter(){
                if(this.letter){
                    // console.log("current页面"+this.letter)
                    // 跳转    
                    const element=this.$refs[this.letter][0];
                    console.log(element);
                    this.scroll.scrollToElement(element);//页面跳转到指定位置
                }
            }                
        }
    }
</script>
<style lang="stylus" scoped>
    .btn{
        position absolute
        left 0
        width 100%
        height 800px
        overflow hidden
    }

    .btn{
        position absolute
        left 0
        width 100%
        height 800px
        overflow hidden
    }
    .box{
        width 100%
        height 30px
        background  #ccc
        font-size 16px
        line-height 30px
        text-align left
        text-indent .3rem
        color #666
    }
    .box .bigbox{
            width 100px
            height 30px
            line-height 30px
            text-align center
            border:1px solid #ccc
            text-indent 0
            margin:10px .3rem
            border-radius 5px
        }
        .hotcity{
            width 100%
            height 30px
            line-height 30px
            margin-top 50px
            text-align left 
            text-indent .3rem
            background #ccc
        }
        .box1 ul li{
            width 25%
            height 50px
            text-align center
            line-height 50px
            border:1px solid #ccc
            border-radius 10px 
            margin 10px 10px
            color #666
        }
        .box1 ul{
            width 100%
            display flex
            justify-content space-around
            flex-wrap wrap
        }
        .string div{
            width 100%
            height 30px
            background-color #ccc
            line-height 30px
            text-align left 
            text-indent .3rem

        }
        .string ul li{
            width 100%
            height 20px
            color #666
            line-height 20px
            text-align left 
            text-indent .3rem
            border-bottom 1px solid #ccc
        }
        .box2{
            width 100%
            height 100%
            div{
                width 100%
            }
        }
        .box4 div{
            text-align left 
            text-indent .3rem
            width 100%
            height 20px
            background-color #ccc
            color: #666;
            line-height 20px
        }
        .box4 ul li{
            width 100%
            height 50px
            line-height .666667rem
            text-align left 
            text-indent .3rem
            color: #666;
            border-bottom  1px solid #ccc
        }
</style>